import React, { useRef, useState, useMemo } from 'react';
import { Button, Tabs, Card, Col, Row, Tag, Switch, Space, Input, message } from 'antd';
import { useAppDispatch, useAppSelector } from '../../store/reactreduxts';
import { actionfn } from '../../store/crmsSlice'
import * as async from '../../store/crmsSlice'
import type { shopTS, typeTS } from '../../store/crmsTS';

type TargetKey = React.MouseEvent | React.KeyboardEvent | string;



//分类列表组件
const TypeList: React.FC = () => {

  //获取rtk状态
  let obj = useAppSelector(state => state.crms1)
  let dispatch = useAppDispatch()

  //计算出 符合条件的新数组
  let newlist = useMemo(() => {
    return obj.shoplist.filter((item: shopTS) => {
      return item.typeId == obj.activeKey
    })
  }, [obj.activeKey, obj.shoplist])
  console.log(newlist);


  //切换高亮的方法
  const onChange = (key: string) => {
    dispatch(actionfn.t_changeActivekey(key))
  };

  //定义一个状态 接收输入框的值
  let [label, setLabel] = useState('')

  //添加
  const add = () => {
    if (label == '') {
      message.open({
        type: 'warning',
        content: '输入框内容不能为空',
      });
      return
    }
    let t = new Date().getTime()
    let obj = {
      "id": t,
      "key": t.toString(),
      "typeId": t,
      "label": label
    }
    //添加的方法
    dispatch(async.async_addtypelist(obj))
    //添加后清空输入框
    setLabel('')
  };

  //删除
  const remove = (targetKey: string) => {
    //判断 如果本分类中有商品是不能被删除的
    let flag = obj.shoplist.some((item: shopTS) => {
      return item.typeId == targetKey
    })
    if (flag) {
      message.error('本分类中有商品不能被删除')
      return
    }
    //执行删除的方法
    dispatch(async.async_deltypelist(targetKey))
  };

  const onEdit = (targetKey: string, action: 'add' | 'remove') => {
    if (action === 'add') {
      add();
    } else {
      remove(targetKey);
    }
  };

  return (
    <div>
      <div style={{ marginBottom: 16 }}>
        <Input style={{ width: '300px' }} placeholder='请输入分类内容'
          value={label} onChange={(e) => {
            setLabel(e.target.value)
          }} />
        <Button onClick={add}>添加</Button>
      </div>
      <Tabs
        hideAdd
        onChange={onChange}
        activeKey={obj.activeKey}
        type="editable-card"
        onEdit={onEdit}
        items={obj.typelist}
      />


      {/* 卡片组件 商品列表渲染*/}
      <Row gutter={16}>
        {
          newlist.map(item => {
            return <Col span={6} key={item.id} style={{ marginBottom: '20px' }}>
              <Card title={item.title} variant="borderless" extra={<span onClick={() => {
                //执行删除商品列表的方法
                dispatch(async.async_delshoplist(item.id))
              }}>删除</span>}>
                <div>商品价格:￥{item.price}</div><br />
                <div>规格:{item.specification.map(item => {
                  return <Tag key={item} color='green'>{item}</Tag>
                })}</div><br />
                <div>商品状态:<Switch checked={item.Collect} onChange={() => {
                  //使用商品列表编辑方法进行状态切换
                  let obj = {
                    ...item,
                    Collect: !item.Collect
                  }
                  dispatch(async.async_editshoplist(obj))
                }} /></div>
              </Card>
            </Col>
          })
        }
      </Row>
    </div>
  );
};

export default TypeList;